<template>
	<view>
		<view class="content">
			<view class="top">
				<text>润华商厦/1单元/1001</text>
				<text>未完成</text>
			</view>
			<view class="info">
				<view>
					<text class="text-overflow">下水道堵塞</text>
				</view>
				<view>
					<text class="text-overflow">下水道堵塞安居房噶几风光大嫁鼓风机爱好广泛大姐火锅发光飞碟好尬凤凰股份哈给对方</text>
				</view>
			</view>
			<view class="img">
				<image mode="aspectFit" :src="src" @tap="enlargeImage"></image>
			</view>
			<view v-show="img" class="enlarge-image">
				<view class="close"><uni-icons @click="close" :size="40" class="uni-icon-wrapper" color="#f1f1f1" type="closeempty" /></view>
				<view class="image">
					<image style="width: 100%;" mode="widthFix" :src="src"></image>
				</view>
			</view>
			<view>
				<text class="title">报修时间：</text>
				<text>2019-12-12</text>
			</view>
		</view>
		<view class="form">
			<view class="item">
				<text class="title">报修人员</text>
				<view>
					<input type="text" placeholder="请输入姓名"/>
				</view>
			</view>
			<view class="item">
				<text class="title">报修备注</text>
				<view class="uni-textarea">
					<textarea @blur="bindTextAreaBlur" auto-height />
				</view>
			</view>
			<view class="item">
				<view class="uni-uploader-head">
					<view class="uni-uploader-title">上传凭证</view>
					<view class="uni-uploader-info">{{imageList.length}}/9</view>
				</view>
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image,index) in imageList" :key="index">
							<view class="uni-uploader__file">
								<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
							</view>
						</block>
						<view class="uni-uploader__input-box">
							<view class="uni-uploader__input" @tap="chooseImage"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="item" style="padding: 30rpx; background-color: #FFFFFF;">
				<button type="primary" style="border-radius: 6px;" @click="change">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import permision from "@/common/permission.js"
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		components: {
			uniIcons
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh', new Date())
		},
		data() {
			return {
				title: 'choose/previewImage',
				imageList: [],
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				src: '../../static/test.jpg',
				img: false,
			}
		},
		onUnload() {
			this.imageList = [],
				this.sourceTypeIndex = 2,
				this.sourceType = ['拍照', '相册', '拍照或相册'],
				this.sizeTypeIndex = 2,
				this.sizeType = ['压缩', '原图', '压缩或原图'],
				this.countIndex = 8;
		},
		methods: {
			bindTextAreaBlur: function (e) {
				console.log(e.detail.value)
			},
			change () {
				setTimeout(() => {
					dd.navigateTo({
						url: '../repair/repair'
					});
				},10);
			},
			sourceTypeChange: function(e) {
				this.sourceTypeIndex = parseInt(e.target.value)
			},
			sizeTypeChange: function(e) {
				this.sizeTypeIndex = parseInt(e.target.value)
			},
			countChange: function(e) {
				this.countIndex = e.target.value;
			},
			chooseImage: async function() {
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif
		
				if (this.imageList.length === 9) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				dd.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						dd.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									dd.showModal({
										title: '授权失败',
										content: '住云小程序需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												dd.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			isFullImg: function() {
				return new Promise((res) => {
					dd.showModal({
						content: "已经有9张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				dd.previewImage({
					current: current,
					urls: this.imageList
				})
				console.log(current)
			},
			enlargeImage: function(e) {
				this.img = true
			},
			close (e) {
				this.img = false
			},
			async checkPermission(code) {
				let type = code ? code - 1 : this.sourceTypeIndex;
				let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
					await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
						'android.permission.READ_EXTERNAL_STORAGE');
		
				if (status === null || status === 1) {
					status = 1;
				} else {
					dd.showModal({
						content: "没有开启权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
		
				return status;
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
	}
	
	view {
		font-size: 28rpx;
		line-height: inherit
	}
	.top {
		border-bottom: 1px #efeff4 solid;
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
	}
	.content {
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	.item {
		background-color: #FFFFFF;
		margin-top: 1px;
		padding: 30rpx;
	}
	.item .title{
		margin-right: 40rpx;
	}
	.form {
		margin-top: 20rpx;
	}
	/* textarea */
	.uni-textarea{
		width:100%;
	}
	.uni-textarea textarea{
		width:96%;
		padding:18upx 2%;
		line-height:1.6;
		font-size:28upx;
		height:150upx;
		background-color: #efeff4;
		margin: 20rpx 0;
		color: #333;
	}
	input {
		width:96%;
		font-size:28upx;
		background-color: #efeff4;
		margin: 20rpx 0;
		color: #333;
	}
	.img {
		margin-top: 20rpx;
	}
	.img image {
		width: 200rpx;
		height: 200rpx;
	}
	.enlarge-image {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top:0;
		z-index: 999;
		overflow: hidden;
		width: 100%;
		background-color: rgba(0,0,0,0.8);
	}
	.close {
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.enlarge-image .image {
		position: absolute;
		top: 20%;
		left: 0;
	}
	.text-overflow {
		width: 100%;
		/*如下为超出隐藏显示为省略号的核心代码*/
		text-overflow: ellipsis;    /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
		word-wrap:break-word;
	}
	.info {
		padding-top: 20rpx;
	}
</style>
